import { FC, ReactElement, useCallback } from "react";
import { Input } from "../../styled";

interface IProps {
  title: string;
  changeTitle: (title: string) => void;
}

const Title: FC<IProps> = ({ title, changeTitle }): ReactElement => {
  const handleBlur = useCallback(
    (event) => {
      changeTitle(event.target.value);
    },
    [changeTitle]
  );

  return (
    <Input
      label="标题"
      placeholder="标题"
      maxLength={20}
      defaultValue={title}
      onBlur={handleBlur}
    />
  );
};

export default Title;
